<template>
  <div style="height: 100%">
    <navbar :title="$t('circle243')"></navbar>
    <div class="content-noBottom">
      <div class="content-container">
        <div class="content-title">
          <div>{{voteDetail.votTitle}}</div>
        </div>
        <div class="content-time">
          <span>{{$t('circle244')}}</span>
          <span>{{ day }}{{ $t('circle247') }}{{ hour
                  }}{{ $t('circle245') }}{{ minute
                  }}{{ $t('circle246') }}
          </span>
        </div>
        <p class="votContent" v-html="$xss(voteDetail.votContent)"></p>
        <span>{{voteDetail.votSummary}}</span>
        <div class="content-type">
          <div class="typeLeft">
            <span>{{checkType(voteDetail.vtqType)}}</span>
            <span>{{voteDetail.involvedCount || '--' }}</span>
            <span>{{$t('circle241')}}</span>
          </div>
          <div class="typeRight">
            <span>{{voteDetail.authorName}}</span>
            <span>{{$t('circle242')}}</span>
            <span>{{voteDetail.votCreateTimestamp | yyyyMMdd}}</span>
          </div>
        </div>
      </div>
      <!--投票选项-->
      <div class="vote">
        <span>{{$t('circle250')}}</span>
      </div>
      <!--x选项-->
      <div class="options-container">
        <!-- 单选 -->
        <van-radio-group v-model="result" :max="checkSelectCount()" :disabled="checkOptions()" class="boder" v-if="voteDetail.vtqType === 'MC_S'">
          <div v-for="(item,index) in voteOptions" :key="index">
            <van-radio :name="item.vtoId" icon-size="12px">{{options[index]}}.{{item.vtoDesc}}
            <div v-if="voteDetail.votType === 'IMG'">
              <van-image class="vote-img" :src="appUrl + item.vtoImgPath"></van-image>
            </div>
            <div class="per-container" v-if="voteDetail.involved">
              <span class="title-span">{{item.selectedCount}}{{$t('circle251')}}</span>
              <van-progress style="width: 40%;margin-top: 2%" color="#075ebb" :show-pivot="false" stroke-width="8px"  :percentage="checkPercentage(item.selectedCount)" />
              <span class="title-span-x">{{checkPercentage(item.selectedCount)}}%</span>
            </div>
            </van-radio>
          </div>
        </van-radio-group>
        <!-- 多选 -->
        <van-checkbox-group v-model="result" :max="checkSelectCount()" :disabled="checkOptions()" class="boder" v-else-if="voteDetail.vtqType === 'MC_M'">
          <div v-for="(item,index) in voteOptions" :key="index">
            <van-checkbox :name="item.vtoId" icon-size="12px">{{options[index]}}.{{item.vtoDesc}}
            <div v-if="voteDetail.votType === 'IMG'">
              <van-image class="vote-img" :src="appUrl + item.vtoImgPath"></van-image>
            </div>
            <div class="per-container" v-if="voteDetail.involved">
              <span class="title-span">{{item.selectedCount}}{{$t('circle251')}}</span>
              <van-progress style="width: 40%;margin-top: 2%" color="#075ebb" :show-pivot="false" stroke-width="8px"  :percentage="checkPercentage(item.selectedCount)" />
              <span class="title-span-x">{{checkPercentage(item.selectedCount)}}%</span>
            </div>
            </van-checkbox>
          </div>
        </van-checkbox-group>
        <!--投票按钮-->
        <div class="detail-btnRead">
          <div v-debounce="putVoteResult" v-if="!checkOptions()">
              {{ checkButtonTitle() }}
          </div>
          <div class="cur" v-else>
              {{ checkButtonTitle() }}
          </div>
        </div>
      </div>
      <common-loading :isLoading="isLoading"></common-loading>
    </div>
  </div>
</template>

<script>
import {Button, Checkbox, CheckboxGroup, Dialog, Image, Notify, Progress, RadioGroup, Radio} from 'vant';
export default {
    name: 'Detail',
    components: {
        [Notify.Component.name]: Notify.Component,
        [Checkbox.name]: Checkbox,
        [CheckboxGroup.name]: CheckboxGroup,
        [Progress.name]: Progress,
        vanButton: Button,
        [Dialog.Component.name]: Dialog.Component,
        [Image.name]: Image,
        [RadioGroup.name]: RadioGroup,
        [Radio.name]: Radio
    },
    data() {
        return {
            votId: this.$route.params.votId,
            voteDetail: {},
            voteOptions: [],
            day: 0,
            hour: 0,
            minute: 0,
            result: [],
            options: [
                'A',
                'B',
                'C',
                'D',
                'E',
                'F',
                'G',
                'H',
                'I',
                'J'
            ],
            count: 0,
            isLoading: false,
            totalVotes: 0
        };
    },
    computed: {
        checkType() {
            return function(type) {
                if (type === 'MC_S') {
                    return this.$t('circle248');
                }
                return this.$t('circle249');
            };
        },
        checkPercentage() {
            return function(count) {
                if (this.count !== 0) {
                    return Math.round(count / this.totalVotes * 10000) / 100.00;
                }
                return 0;
            };
        },
        checkButtonColor() {
            return function() {
                if (this.voteDetail.involved || this.voteDetail.status === 'END' || !this.checkStartFrom(this.voteDetail.votEffDateFrom)) {
                    return '#ccc';
                }
                return '#075ebb';
            };
        },
        checkButtonTitle() {
            return function() {
                if (this.voteDetail.involved) {
                    return this.$t('circle252');
                } else if (this.voteDetail.status === 'END') {
                    return this.$t('circle254');
                } else if (this.voteDetail.votEffDateFrom) {
                    if (this.checkStartFrom(this.voteDetail.votEffDateFrom)) {
                        return this.$t('circle253');
                    } else {
                        return this.$t('lab_tip_7');
                    }
                } else {
                    return this.$t('circle253');
                }
            };
        },
        checkSelectCount() {
            return function() {
                if (this.voteDetail.vtqType === 'MC_S') {
                    return 1;
                } else {
                    return this.voteDetail.voteOptions.length;
                }
            };
        },
        checkOptions() {
            return function() {
                if (this.voteDetail.status === 'END') {
                    return true;
                } else if (this.voteDetail.involved) {
                    return this.voteDetail.involved;
                } else {
                    return !this.checkStartFrom(this.voteDetail.votEffDateFrom);
                }
            };
        }
    },
    mounted() {
        this.getVoteDetail();
    },
    methods: {
        //获取投票详情
        getVoteDetail() {
            this.isLoading = true;
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/voting/detail/${this.votId}`
            }).then(res => {
                this.voteDetail = res.data;
                this.voteOptions = res.data.voteOptions;
                this.count = res.data.involvedCount;
                this.totalVotes = res.data.totalVotes; // 总票数
                this.getRemainderTime(res.data.timeLeft);
                this.checkSelect(res.data.vtqType, res.data.voteOptions);
                this.isLoading = false;
                //选项判断
            }).catch(err => {
                Dialog.alert({
                    width: '180px',
                    confirmButtonText: this.$t('mall_10'),
                    confirmButtonColor: '#00aeef',
                    message: err.response.data.errorMsg || err.response.data.errMsg
                });
                setTimeout(() => this.$router.back(), 1000);
            });
        },
        putVoteResult() {
            let result = [];
            if (this.voteDetail.vtqType === 'MC_S') {
                result.push(this.result);
            } else {
                result = this.result;
            }
            if (result.length === 1 && result[0] instanceof Array) {
                Dialog.alert({
                    width: '180px',
                    confirmButtonText: this.$t('mall_10'),
                    confirmButtonColor: '#00aeef',
                    message: this.$t('circle296')
                });
                return false;
            }
            if (result.length <= 0) {
                Dialog.alert({
                    width: '180px',
                    confirmButtonText: this.$t('mall_10'),
                    confirmButtonColor: '#00aeef',
                    message: this.$t('circle296')
                });
                return false;
            }
            this.isLoading = true;
            this.$axios({
                method: 'POST',
                url: `/app/api/trainee/voting/response`,
                data: {
                    results: result,
                    vrpVotId: Number(this.votId),
                    vrpVtqId: this.voteDetail.vtqId
                }
            }).then(() => {
                this.isLoading = false;
                Dialog.alert({
                    width: '180px',
                    confirmButtonText: this.$t('mall_10'),
                    confirmButtonColor: '#00aeef',
                    message: this.$t('circle255')
                });
                this.getVoteDetail();
            }).catch(err => {
                this.isLoading = false;
                Dialog.alert({
                    width: '180px',
                    confirmButtonText: this.$t('mall_10'),
                    confirmButtonColor: '#00aeef',
                    message: err.response.data.errorMsg || err.response.data.errMsg
                });
            });
        },
        /**
         * 处理剩下多少时间投票
         */
        getRemainderTime(runTime) {
            if (runTime > 0) {
                const day = Math.floor(runTime / 86400);
                runTime = runTime % 86400;
                const hour = Math.floor(runTime / 3600);
                runTime = runTime % 3600;
                const minute = Math.floor(runTime / 60);
                this.day = day;
                this.hour = hour;
                this.minute = minute;
            } else {
                this.day = 0;
                this.hour = 0;
                this.minute = 0;
            }
        },
        // 开始时间判断
        checkStartFrom(time) {
            if (!time) return false;
            const s = new Date().getTime(); //当前时间
            const date1 = new Date(time.replace(/-/g, '/')).getTime();
            if (s > date1) {
                return true;
            } else {
                return false;
            }
        },

        //选项判断
        checkSelect(type, list) {
            let result = [];
            if (list && list.length > 0) {
                list.forEach(i => {
                    if (i.selected) {
                        if (type === 'MC_S') {
                            result = i.vtoId;
                        } else {
                            result.push(i.vtoId);
                        }
                    }
                });
            }
            this.result = result;
        }
    }
};
</script>

<style scoped lang="less">
  /deep/.van-checkbox__label, /deep/.van-radio__label{
    font-size: 12px;
    color: #333;
    flex: 1;
  }
  /deep/.van-checkbox, /deep/.van-radio{
    padding-top: 20px;
    padding-bottom: 15px;
    align-items: flex-start;
  }
  /deep/.van-radio__icon, /deep/.van-checkbox__icon{
    margin-top: 4px;
  }
  /deep/.van-button--large{
    width: 60%;
    height: 40px;
  }
  /deep/.van-button{
    font-size: 12px;
    color: #fff;
  }
  .content-container{
    // margin-top: 62px;
    background-color: #fff;
    padding: 18px 20px 18px 16px;
    padding-top: 15px;
    min-height: 20px;
    .content-title{
      >span{
        font-size: 14px;
        color: #333;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        border-bottom: #eee 1px solid;
        padding-bottom:15px;
      }
    }
    .content-time{
      padding-top: 22px;
      padding-bottom: 14px;
      >span{
        font-size: 12px;
        color: #999;
      }
      span:nth-child(2){
        color: #075ebb;
      }
    }
    >span{
      font-size: 12px;
      color: #666;
      border-bottom: #eee 1px solid;
      padding-bottom:21px;
    }
    .content-type{
      padding-top: 18px;
      display: flex;
      justify-content: space-between;
      .typeLeft{
        display: flex;
        span:nth-child(1){
          font-size: 11px;
          color: #075ebb;
          display: block;
          width: 38px;
          line-height: 20px;
          text-align: center;
          justify-content: center;
          border-radius: 4px;
          border: 1px solid #075ebb;
          margin-right: 9px;
        }
        >span{
          font-size: 11px;
          color: #666;
          line-height: 20px;
        }
      }
      .typeRight{
        >span{
          font-size: 11px;
          color: #666;
          line-height: 20px;
        }
      }
    }
  }
  .vote{
    padding: 15px 0 8px 15px;
    >span{
      font-size: 12px;
      color: #666;
    }
  }
  .options-container{
    padding: 0 20px 68px 16px;
    background-color: #fff;
    .per-container{
      display: flex;
      line-height: 20px;
      .title-span{
        padding-right: 10px;
      }
      >span{
        font-size: 12px;
        color: #666
      }
      .title-span-x{
        padding-left: 7px;
      }
    }
    .boder{
      // border-bottom: 1px solid #eee;
      padding-bottom: 20px;
      .vote-img{
        width: 120px;
        height: 70px;
        margin-bottom: 10px;
      }
    }
  }
  .votContent{
    /deep/img {
      width: 100%;
      // height: 100%;
    }
    /deep/video {
      width: 100%;
    }
  }
</style>
